<template>
  <div class="page">
    <!-- 搜索框 -->
    <van-search shape='round' v-model="value" placeholder="请输入搜索关键词"  @focus='$router.push("/home/search")'/>
    <div class="bot">
      <div class="left">
        <!-- 侧边导航栏 -->
        <van-sidebar v-model="activeKey">
          <van-sidebar-item 
            :title="item.name"
            v-for="item in categoryList" 
            :key="item.id"
            @click="change(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <img :src="currentCategory.banner_url">
        <p class="imgText">{{currentCategory.front_desc}}</p>
        <p class="title">—— {{currentCategory.name}} ——</p>
        <van-grid :column-num="3" :border=false>
          <van-grid-item
            v-for="value in currentCategory.subCategoryList"
            :key="value.id"
            :icon="value.banner_url"
            :text="value.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import {getPageDate,getCurrentDate} from '@/utils/http.js'
export default {
    name:'Page',
    data() {
      return {
        value:'', //搜索key
        activeKey: 0, //侧边导航
        categoryList:[], //左侧数据数组
        currentCategory:[] // 分类页第一项
      }
    },
    mounted(){
      getPageDate().then(res=>{
        this.categoryList=res.data.categoryList
        this.currentCategory=res.data.currentCategory
      })
    },
    methods:{
      change(id){
        getCurrentDate({id}).then(res=>{
          this.currentCategory =res.data.currentCategory
        })
      }
    }
}
</script>

<style lang='less' scope>
.bot {
  display: flex;
  .right {
    width: 100%;
    flex: 1;
    position: relative;
    img {
      width: 100%;
      display: block;
    }
    .imgText{
      position: absolute;
      width: 100%;
      top: -10px;
      text-align: center;
      line-height: 100px;
      color: white;
      font-size: 14px;
      height: 100px;
      background: rgba(95, 94, 94, 0.582);
    }
    .title{
      text-align: center;
      font-size: 14px;
      margin: 10% 0;
    }
  }
}
</style>